<%--
  Created by IntelliJ IDEA.
  User: ss
  Date: 2019/12/3
  Time: 14:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
</head>
<body class="easyui-layout">
     <!--北边-->
     <div data-options="region:'north',split:false" style="height:100px;background:url('/images/header_bg.png') no-repeat right ">
         <div style="margin-top: 20px;">
             <img src="/images/logo.png">
         </div>
     </div>
     <!--南边-->
     <div data-options="region:'south',split:false" style="height:100px;background: url('/images/header_bg.png') no-repeat right"></div>
     <!--西边-->
     <div data-options="region:'west',title:'菜单导航',split:true" style="width:250px;">

         <div data-options="fit:true"  id="aa" class="easyui-accordion" style="width:300px;height:200px;">

             <div title="基本功能" data-options="iconCls:'icon-mini-add'" style="overflow:auto;padding:10px;">

                  <ul id="demo1"  class="ztree"></ul>

             </div>
             <div title="系统管理" data-options="iconCls:'icon-mini-add'" style="padding:10px;">
                 <ul id="demo2" class="ztree"></ul>

             </div>
         </div>

     </div>
     <!--中间-->
     <div data-options="region:'center'" style="padding:5px;background:#eee;">
         <div id="tt" class="easyui-tabs" data-options="fit:true" style="width:500px;height:250px;">
             <div title="首页" style="padding:20px;display:none;">
                 这是首页!!!
             </div>
         </div>

     </div>

<script>

    var setting={
        data:{
            simpleData:{
                enable:true,
                idKey:"id",
                pIdKey:"pId",
                rootPId:0
            }
        },
        callback:{
            onClick:zTreeOnclick
        }
    };


    //点击事件
    function zTreeOnclick(even,treeId,treeNode){

       //1.首先判断 在选项卡中 该项 是否已经 存在。
        //2.如果存在，则选中该存在的项
        //3.如果不存在,则 添加 该 选项卡

        //当为父节点时 点击无效  父节点 没有 page属性
        if (treeNode.page!=null && treeNode.page!=""){
            if ($("#tt").tabs('exists',treeNode.name)) {
                $("#tt").tabs('select',treeNode.name)
            }else{

                var content='<iframe  style="width: 100%;height:100% ;" src="'+treeNode.page+'"></iframe>'
                $("#tt").tabs('add',{
                    title:treeNode.name,
                    closable:true,
                    content:content,
                })
            }
        }
    }

    //就绪函数
    $(function(){

        //使用ajax请求json数据 之基本功能
         $.ajax({
             url:'${pageContext.request.contextPath}/json/menu.json',
             type:'post',
             dataType:'json',
             success:function (o) {
                 //ztree初始化函数
                 $.fn.zTree.init($("#demo1"),setting,o);
             }
         })


        //使用ajax请求 json数据 之系统管理
        $.ajax({
            url:'${pageContext.request.contextPath}/json/admin.json',
            type:'post',
            dataType:'json',
            success:function (o) {

                //ztree初始化函数
                $.fn.zTree.init($("#demo2"),setting,o)
            }
        })
    })

</script>
</body>
</html>
